<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<script type="text/javascript" src="http://www.lovejavascript.com/js/jquery-2.1.4.min.js"></script>
	<link rel="stylesheet" type="text/css" th:href="@{/css/GridManager.css}">
	<script type="text/javascript" th:src="@{/js/GridManager.js}" ></script>
<title>GridManager:jquery环境下渲染</title>
<style>

	html, body{
		width: 100%;
		height: 100%;
		overflow-x:hidden;
		margin: 0px;
		padding: 0px;
	}
</style>
</head>

<body>

	<div class="dialog-demo">
		<button onclick="deployHoliday()">添加请假流程</button>
		<button onclick="deployExpense()">添加报销流程</button>
	</div>
	<br/>
	<div class="dialog-demo">
		<table grid-manager="demoOne"></table>
	</div>
<script type="text/javascript" >
	function remove(id){
        if(confirm("确定删除该流程?")){
            $.post("/flowable/remove", {id:id},
                function(data,status){
                    $('table').GM('setQuery', null, function(){
                        console.log('刷新执行成功');
                    });
                }
			);
        }
	}

    function deployExpense(){
        if(confirm("确定部署报销流程?")){
            $.post("/expense/deploy", null,
                function(data,status){
                    $('table').GM('setQuery', null, function(){
                        console.log('刷新执行成功');
                    });
                }
            );
        }
    }

    function deployHoliday(){
        if(confirm("确定部署请假流程?")){
            $.post("/holiday/deploy", null,
                function(data,status){
                    $('table').GM('setQuery', null, function(){
                        console.log('刷新执行成功');
                    });
                }
            );
        }
    }

	//发起流程
    function add(key){
        console.log(key)
	    var url = "/expense/add";
	    if(key === "HolidayRequest"){
            url = "/holiday/add";
		}
		$.post(url, null,
			function(data,status){
				$('table').GM('setQuery', null, function(){
					console.log('刷新执行成功');
				});
			}
		);
    }

	$('table').GM({
		supportRemind: false,
		gridManagerName: 'test',
//			,disableCache:true,
		height: '400px',
		supportAjaxPage:true,
		supportSorting: true,
		ajax_url: '/flowable/taskList',
		ajax_type: 'POST',
		query: {pluginId: 1},
		pageSize:20,
		columnData: [
            {key: 'action', remind: 'the action', text: '操作', width: '150px', template: function(action, rowObject){
                    return '<button class="plugin-action edit-action" onclick="add(\''+rowObject.key+'\')">发起流程</button>'
                        +'&nbsp;<button class="plugin-action del-action" onclick="remove(\''+rowObject.deploymentId+'\')">删除</button>';
            }},
            {key: 'id', text: '任务ID', sorting: 'DESC', width: '200px'},
            {key: 'delegationState', text: '状态', width: '250px'},
		    {key: 'category', text: '类别', width: '120px'},
            {key: 'name', text: '当前节点名称', width: '250px'},
            {key: 'claimTime', text: '限制时间', width: '150px'},
			{key: 'createTime', text: '创建时间', width: '150px'},
            {key: 'description', text: '说明', width: '200px'},
			{key: 'deuDate', text: 'deuDate', width: '200px'},
            {key: 'executionId', text: '执行Id', width: '200px'},
            {key: 'formKey', text: '表单Id'},
            {key: 'owner', text: '创建人'},
            {key: 'parentTaskId', text: '父任务Id'},
            {key: 'priority', text: '优先级'},
            {key: 'processDefinitionId', text: '流程定义Id'},
            {key: 'processInstanceId', text: '流程实例Id'},
            {key: 'scopeDefinitionId', text: '范围定义Id'},
            {key: 'scopeId', text: '范围Id'},
            {key: 'scopeType', text: '范围类型'},
            {key: 'subScopeId', text: '子范围标识'},
            {key: 'taskDefinitionId', text: '任务定义Id'},
            {key: 'taskDefinitionKey', text: '任务定义Key'},
            {key: 'tenantId', text: '租户Id'}
		],
		// 分页前事件
		pagingBefore: function(query){
			console.log('pagingBefore', query);
		},
		// 分页后事件
		pagingAfter: function(data){
			console.log('pagingAfter', data);
		},
		// 排序前事件
		sortingBefore: function (data) {
			console.log('sortBefore', data);
		},
		// 排序后事件
		sortingAfter: function (data) {
			console.log('sortAfter', data);
		},
		// 宽度调整前事件
		adjustBefore: function (event) {
			console.log('adjustBefore', event);
		},
		// 宽度调整后事件
		adjustAfter: function (event) {
			console.log('adjustAfter', event);
		},
		// 拖拽前事件
		dragBefore: function (event) {
			console.log('dragBefore', event);
		},
		// 拖拽后事件
		dragAfter: function (event) {
			console.log('dragAfter', event);
		}
	});


</script>
</body>
</html>
